<template>
  <div style="background: #fff;height: 100%; width: 100%;">
        <div  class="uu-table-wrap">
            <div class="uu-table">
                <div style="width: 100%; position: absolute; top: 0; bottom: 42px;">
                    <el-table :data="tableData" v-if="isTableShow" height="100%" style="width: 100%;">
                        <template v-for="item, index in columns">
                            <template v-if="item.fixed">
                                <template v-if="item.width">
                                    <el-table-column  :prop="item.prop" :fixed="item.fixed" :label="item.label" :width="item.width" v-if="item.scoped">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button-group>
                                                    <el-button @click="commitEvent(button.commit, scope.row)" :key="ind" size="small" v-for="button, ind in item.scoped">{{button.title}}</el-button>
                                                </el-button-group>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :prop="item.prop" :fixed="item.fixed" :label="item.label" :width="item.width" v-else></el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column  :prop="item.prop" :fixed="item.fixed" :label="item.label" v-if="item.scoped">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button-group>
                                                    <el-button @click="commitEvent(button.commit, scope.row)" :key="ind" size="small" v-for="button, ind in item.scoped">{{button.title}}</el-button>
                                                </el-button-group>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :prop="item.prop" :fixed="item.fixed" :label="item.label" v-else></el-table-column>
                                </template>
                            </template>
                            <template v-else>
                                <template v-if="item.width">
                                    <el-table-column  :prop="item.prop" :label="item.label" :width="item.width" v-if="item.scoped">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button-group>
                                                    <el-button @click="commitEvent(button.commit, scope.row)" :key="ind" size="small" v-for="button, ind in item.scoped">{{button.title}}</el-button>
                                                </el-button-group>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-else></el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column  :prop="item.prop" :label="item.label" v-if="item.scoped">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button-group>
                                                    <el-button @click="commitEvent(button.commit, scope.row)" size="small" :key="ind" v-for="button, ind in item.scoped">{{button.title}}</el-button>
                                                </el-button-group>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :prop="item.prop" :label="item.label" v-else></el-table-column>
                                </template>
                            </template>
                        </template>
                    </el-table>
                </div>
                <div class="uu-page">
                    <div class="clear">
                        <el-pagination
                            class="fr"
                            :current-page="pageNumber"
                            layout="prev, pager, next"
                            :prev-text="preText"
                            :next-text="nexText"
                            :total="totalPage"
                            @current-change="currentChange"
                            @size-change="changeSize"
                            >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
    export default {
        name: 'uu-table',
        data () {
            return {
                isTableShow: false
            }
        },
        methods: {
            // 翻页
            currentChange (page) {
                this.$emit('current-change', page);
            },
            // 改变页码配置
            changeSize (size) {
                this.$emit('size-change', size);
            },
            // 触发操作事件
            commitEvent (event, obj) {
                this.$emit(event, obj);
            }
        },
        props: {
            data: {
                type: Array,
                default: () => []
            },
            columns: {
                type: Array,
                default: () => []
            },
            "current-page": {
                type: Number,
                default: 1
            },
            "page-sizes": {
                type: Number,
                default: 20
            },
            total: {
                type: Number,
                default: 0
            },
            "prev-text": {
                type: String,
                default: '上一页'
            },
            "next-text": {
                type: String,
                default: '下一页'
            },
        },
        mounted () {
            this.$nextTick(() => {
                this.isTableShow = true;
            })
        },
        watch: {
        },
        computed: {
            tableData () {
                return this.data;
            },
            pageNumber () {
                return this.currentPage;
            },
            pageSize () {
                return this.pageSizes;
            },
            totalPage () {
                return this.total;
            },
            preText () {
                return this.prevText;
            },
            nexText () {
                return this.nextText;
            }
        }
    }
</script>

<style lang="less" scoped>
    
</style>

